<!--智慧消防V1.0-edit页面-->
<template>
  <div class="app-container">
    <div class="body-title">资源{{ createStatus ? '新增' : '编辑' }}</div>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-form :model="permissionForm" ref="permissionForm" :rules="permissionFormRules" label-width="100px">
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="资源名称" prop="name">
              <el-input type="text" v-model="permissionForm.name" placeholder="请输入资源名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="所属上级" prop="type">
              <el-select style="width: 100%" v-model="permissionForm.parentId" ref="selectUpResId"
                         placeholder="请选择父级资源">
                <el-option hidden key="upResId" :value="permissionForm.parentId" :label="permissionForm.parentName">
                </el-option>
                <el-tree :data="parentPermission" default-expand-all node-key="id"
                         :expand-on-click-node="false"
                         :check-on-click-node="true"
                         ref="tree" highlight-current :props="defaultProps" @node-click="nodeClick"></el-tree>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="资源路径" prop="path">
              <el-input type="text" v-model="permissionForm.path" placeholder="请输入资源路径 如 /login" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="资源标题" prop="title">
              <el-input type="text" v-model="permissionForm.title" placeholder="请输入资源标题 如 /登录中心" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="资源图标" prop="icon">
              <el-input type="text" v-model="permissionForm.icon" placeholder="请输入资源图标 如 el-icon-if-caidan"
                        clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="资源排序" prop="sort">
              <el-input type="number" v-model="permissionForm.sort" placeholder="请输入资源排序 如 1" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="菜单类型" prop="type">
              <el-radio-group v-model="permissionForm.type">
                <el-radio label="menu">菜单</el-radio>
                <el-radio label="button">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="资源状态" prop="status">
              <el-switch v-model="permissionForm.status" active-text="可用" inactive-text="禁用"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="资源隐藏" prop="hidden">
              <el-switch v-model="permissionForm.hidden" active-text="隐藏" inactive-text="展示"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
            <el-form-item label="资源可操作" prop="affix">
              <el-switch v-model="permissionForm.affix" active-text="固定" inactive-text="可关闭"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="资源描述" prop="description">
              <el-input type="textarea" :rows="2" placeholder="请输入资源描述" v-model="permissionForm.description"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-col>
      <div style="text-align: center" class="dialog-footer">
        <el-button @click="cancelPermission">取 消</el-button>
        <el-button :loading="addLoading" v-if="createStatus" type="primary" @click="createPermission">创 建</el-button>
        <el-button :loading="addLoading" v-else type="primary" @click="updatePermission">修 改</el-button>
      </div>
    </el-row>
  </div>
</template>

<script>
import {addInPermission, getInPermissionVo, getParentPermissionsByType, updateInPermission} from "@/api/role";

export default {
  name: "permissionEdit",
  data() {
    return {
      permissionForm: {
        type: "menu",
        parentId: 0,
        parentName: "系统本级",
        status: true,
      },
      permissionFormRules: {},
      //父级资源数据
      parentPermission: [],
      //资源类型
      permissionType: [
        {
          value: 'menu',
          label: '菜单'
        },
        {
          value: 'button',
          label: '按钮'
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      addLoading: false
    }
  },
  computed: {
    createStatus() {
      return this.$route.params.ucId == '0'
    }
  },
  created() {
    this.getParentPermissionsByType()
    this.getInPermissionVo()
  },
  methods: {
    /**详情*/
    getInPermissionVo(){
      if(this.$route.params.ucId ==='0') return
      getInPermissionVo({ucId:this.$route.params.ucId}).then(res=>{
        this.permissionForm = res.data
        this.parentPermission.forEach(p=>{
          if(p.id === this.permissionForm.parentId){
            this.permissionForm.parentName=p.name
          }
        })
      })
    },
    cancelPermission() {
      window.history.back()
    },
    createPermission() {
      this.addLoading = true
      this.$refs['permissionForm'].validate(valid => {
        if (valid) {
          addInPermission(this.permissionForm).then(res => {
            this.addLoading = false
            this.$notify.success({
              title: '成功',
              message: "添加资源成功"
            })
            this.cancelPermission()
          }).catch(res => {
            this.addLoading = false
            this.$notify.error({
              title: '失败',
              message: res.msg
            })
          })
        } else {
          this.addLoading = false
          console.log("表单验证不通过")
        }
      })
    },
    updatePermission() {
      this.addLoading = true
      this.$refs['permissionForm'].validate(valid => {
        if (valid) {
          updateInPermission(this.permissionForm).then(res => {
            this.addLoading = false
            this.$notify.success({
              title: '成功',
              message: "编辑资源成功"
            })
            this.cancelPermission()
          }).catch(res => {
            this.addLoading = false
            this.$notify.error({
              title: '失败',
              message: res.msg
            })
          })
        } else {
          this.addLoading = false
          console.log("表单验证不通过")
        }
      })
    },
    //获取父级资源数据列表
    getParentPermissionsByType() {
      this.parentPermission = [{
        id: "0",
        name: '系统本级'
      }]
      getParentPermissionsByType({type: this.permissionForm.type, userType: this.permissionForm.userType}).then(res => {
        this.parentPermission.push(...res.data)
      })
    },
    nodeClick(data) {
      console.log(data)
      this.permissionForm.parentId = data.id
      this.permissionForm.parentName = data.name
      // 这里主要配置树形组件点击节点后，设置选择器的值；自己配置的数据，仅供参考
      this.$refs.selectUpResId.blur()
    },
  }
}
</script>
